طراحی وب سایت ریسپانسیو با HTML5 و CSS [ویدئو]

Responsive Web Design with HTML5 and CSS [Video]

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: در این دوره، شما سفری را برای تسلط بر اصول طراحی وب ریسپانسیو آغاز خواهید کرد، که از اصول اساسی شروع می شود و به تکنیک های پیشرفته می رسد. شما با کاوش در اصول طراحی واکنشگرا، درک پشتیبانی مرورگر، و غواصی در پرسش های رسانه ای شروع خواهید کرد. از آنجا، یاد خواهید گرفت که نشانه گذاری موثر HTML، از جمله عناصر معنایی جدید در HTML5 بنویسید، و دسترسی را با انطباق WCAG و WAI-ARIA افزایش دهید. در مرحله بعد، به پیچیدگی‌های پرسش‌های رسانه‌ای و پرس‌وجوهای کانتینر، درک پیاده‌سازی آنها و آزمایش طرح‌های پاسخ‌گو خواهید پرداخت. شما طرح‌های پیکسل ثابت را به طرح‌بندی‌های روان تبدیل می‌کنید و از قدرت Flexbox و CSS Grid برای طراحی‌های پیچیده و انعطاف‌پذیر استفاده می‌کنید. انتخابگرهای پیشرفته CSS، تایپوگرافی و تکنیک‌های رنگی، همراه با مدیریت عکس‌های واکنش‌گرا و استفاده از SVG برای گرافیک‌های برداری مقیاس‌پذیر پوشش داده خواهد شد. بخش‌های آخر شما را از طریق انتقال، تبدیل‌ها و انیمیشن‌ها همراه با ویژگی‌های CSS پیشرفته مانند ویژگی‌های سفارشی و توابع CSS می‌برد. همچنین تکنیک‌های عملی برای فرم‌های HTML5، قابلیت‌های پیشرفته CSS و بهینه‌سازی عملکرد را بررسی خواهید کرد. این دوره به شما اطمینان می دهد که مهارت ایجاد وب سایت های خیره کننده و واکنش گرا را دارید که متمایز هستند. با استفاده از HTML5 و CSS وب سایت های واکنش گرا و سازگار ایجاد کنید پیاده سازی تکنیک های پیشرفته CSS برای چیدمان و طراحی افزایش دسترسی به وب با استانداردهای WCAG و WAI-ARIA عملکرد وب را بهینه کنید و تصاویر واکنشگرا را به طور موثر مدیریت کنید ویژگی های پیشرفته CSS و ویژگی های سفارشی این دوره برای توسعه دهندگان و طراحان وب با درک اولیه HTML و CSS طراحی شده است که می خواهند دانش خود را در مورد طراحی وب واکنش گرا عمیق تر کنند. تجربه قبلی با توسعه وب پایه توصیه می شود. کاوش در طیف کامل طراحی وب ریسپانسیو، از اصول اولیه تا تکنیک های پیشرفته * جلسات عملی با HTML5 و CSS، با تمرکز بر برنامه های کاربردی دنیای واقعی و بهترین شیوه ها * کشف روش هایی برای بهبود عملکرد وب سایت و مدیریت تصاویر واکنش گرا

سرفصل ها و درس ها

اصول طراحی وب سایت واکنش گرا The Fundamentals of Responsive Web Design

  • مقدمه Introduction

  • پشتیبانی مرورگر، ابزار و نمونه کد Browser support, tooling and code samples

  • آشنایی با طراحی وب سایت واکنش گرا Understanding Responsive Web Design

  • پرسش های رسانه ای را وارد کنید Enter media queries

  • خلاصه Summary

نوشتن نشانه گذاری HTML Writing HTML Markup

  • نوشتن نشانه گذاری HTML Writing HTML Markup

  • شروع صحیح صفحات HTML Starting HTML pages correctly

  • عناصر معنایی جدید در HTML5 New semantic elements in HTML5

  • عناصر گروه بندی HTML HTML grouping elements

  • معناشناسی سطح متن HTML HTML text-level semantics

  • استفاده از عناصر HTML5 Using HTML5 elements

  • انطباق دسترسی WCAG و WAI-ARIA برای برنامه های کاربردی وب در دسترس تر WCAG accessibility conformance and WAI-ARIA for more accessible web applications

  • جاسازی رسانه در HTML5 Embedding media in HTML5

  • عنصر The element

  • خلاصه و تکلیف Summary and homework

پرسش های رسانه ای و پرس و جوهای کانتینر Media Queries and Container Queries

  • پرسش های رسانه ای و پرس و جوهای کانتینر Media Queries and Container Queries

  • متا تگ و پرسش های رسانه ای The meta tag and Media Queries

  • تست طرح‌های واکنش‌گرا بر روی شبیه‌سازها و شبیه‌سازها Testing responsive designs on emulators and simulators

  • آیا باید پرس و جوهای رسانه ای را به فایل های خود تقسیم کنید؟ Should you split media queries into their own files?

  • پرسش‌های رسانه‌ای را ادغام کنید یا آنها را در جایی که مناسب است پراکنده کنید؟ Consolidate media queries or scatter them where it suits?

  • پرس و جوهای رسانه سطح 5 Media Queries Level 5

  • پرس و جوهای کانتینر Container queries

  • خلاصه Summary

Fluid Layout و Flexbox Fluid Layout and Flexbox

  • Fluid Layout و Flexbox - مقدمه Fluid Layout and Flexbox - Introduction

  • تبدیل یک طرح پیکسل ثابت به یک طرح متناسب سیال Converting a fixed pixel design to a fluid proportional layout

  • چرا به Flexbox نیاز داریم؟ Why do we need Flexbox?

  • پیاده سازی Flexbox Flexbox Implementation

  • پاورقی چسبنده Sticky Footer

  • مرتب سازی مجدد بصری Visual Reordering

  • خلاصه Summary

طرح بندی با شبکه CSS Layout with CSS Grid

  • Layout با CSS Grid - مقدمه Layout with CSS Grid - Introduction

  • نحو اصلی گرید Basic Grid syntax

  • پالایش سیستم گرید ما Refining our Grid System

  • قرار دادن و اندازه بندی موارد Grid Layout Placing and sizing Grid Layout items

  • خطوط شبکه و مناطق شبکه-الگو نامگذاری شده است Named grid lines and grid-template-areas

  • تنظیم خودکار و پر کردن خودکار auto-fit and auto-fill

  • نحو مخفف Shorthand syntax

  • اجازه دادن به عناصر تو در تو برای مشارکت در Grid Allowing nested elements to take part in the Grid

  • خلاصه Summary

انتخابگرهای CSS، تایپوگرافی و موارد دیگر CSS Selectors, Typography and More

  • انتخابگرهای CSS، تایپوگرافی و موارد دیگر CSS Selectors, Typography, and More

  • انتخابگرها، واحدها و قابلیت ها Selectors, units, and capabilities

  • انتخابگرهای CSS - فراتر از حالت عادی! CSS selectors - beyond the normal!

  • شبه کلاس های ساختاری CSS CSS structural pseudo-classes

  • انتخاب بر اساس nth در طراحی های وب واکنش گرا nth-based selection in responsive web designs

  • انتخابگرهای ترکیبی - فرزند، خواهر و برادر بعدی و خواهر و برادر بعدی Combinator selectors – child, next sibling, and subsequent sibling

  • انتخابگرهای گروه بندی Grouping selectors

  • طول های مربوط به viewport پاسخگو Responsive viewport-relative lengths

  • استفاده از @supports برای فورک کردن CSS Using @supports to fork CSS

  • تایپوگرافی وب Web typography

  • قانون @font-face CSS The @font-face CSS rule

  • فونت های متغیر Variable fonts

  • خلاصه Summary

رنگ CSS CSS Color

  • مقدمه Introduction

  • فرمت رنگ RGB RGB Color Format

  • کانال آلفا Alpha Channel

  • مفاهیم رنگ و اصطلاحات Color concepts and terminology

  • فضاهای رنگی پیشرفته Advanced Color Spaces

  • کاوش رنگ آزمایشگاهی و LCH Exploring Lab and LCH color

  • OKLab و OKLCH OKLab & OKLCH

  • استفاده از توابع color-mix() & color-contrast() Using color-mix() & color-contrast() functions

  • خلاصه Summary

زیبایی شناسی خیره کننده با CSS Stunning Aesthetics with CSS

  • مقدمه و اهداف Introduction and Objectives

  • سایه های متن و سایه های جعبه Text Shadows and Box Shadows

  • گرادیان های پس زمینه Background Gradients

  • گرادیان های مخروطی، گرادیان های تکراری و الگوهای گرادیان پس زمینه Conic Gradients, Repeating Gradients and Background Gradient Patterns

  • تصاویر پس زمینه چندگانه Multiple Background Images

  • فیلترهای CSS CSS Filters

  • مسیر کلیپ CSS CSS clip-path

  • Mask-Image و Mix-Blend-Mode Mask-Image and Mix-Blend-Mode

  • خلاصه Summary

تصاویر واکنش گرا Responsive Images

  • مقدمه ای بر تصاویر واکنش گرا Introduction to Responsive Images

  • فرمت های تصویر مدرن Modern Image Formats

  • نحو برای تصاویر واکنشگرا Syntax for Responsive Images

  • جهت هنری با عنصر تصویر Art direction with the picture element

  • خلاصه Summary

SVG SVG

  • مقدمه ای بر SVG Introduction to SVG

  • آشنایی با یک SVG پایه Understanding a basic SVG

  • عناصر و ویژگی های SVG Elements and Attributes of SVG

  • ایجاد SVG Creating SVGs

  • درج SVG در صفحات وب Inserting SVGs into Webpages

  • استفاده مجدد از اشیاء گرافیکی از نمادها Reusing Graphical Objects from Symbols

  • رنگ‌آمیزی مجدد SVGها با ویژگی‌های سفارشی CSS Re-coloring SVGs with CSS Custom Properties

  • استفاده مجدد از اشیاء گرافیکی از منابع خارجی Reusing Graphical Objects from External Sources

  • رنگ‌آمیزی SVG با ماسک تصویر Coloring SVGs with mask-image

  • بررسی روش‌های درج SVG Exploring SVG Insertion Methods

  • انیمیشن SMIL SMIL Animation

  • یک ظاهر طراحی SVG Styling SVGs

  • متحرک سازی یک SVG با CSS Animating an SVG with CSS

  • متحرک سازی SVG با جاوا اسکریپت Animating SVG with JavaScript

  • استفاده از SVG به عنوان فیلتر Using SVGs as Filters

  • درک پرسش های رسانه ای در SVG ها Understanding Media Queries within SVGs

  • بهینه سازی SVG ها Optimizing SVGs

  • خلاصه و منابع Summary and Resources

انتقال، تبدیل و انیمیشن Transitions, Transformations and Animations

  • مقدمه ای بر انتقال ها، تبدیل ها و انیمیشن ها Introduction to Transitions, Transformations, and Animations

  • انتقال CSS و ویژگی های آنها CSS Transitions and Their Properties

  • درک توابع زمان بندی برای انتقال CSS Understanding Timing Functions for CSS Transitions

  • CSS 2D تبدیل می شود CSS 2D Transforms

  • درک ویژگی Transform-origin Understanding the Transform-origin Property

  • CSS 3D Transformations CSS 3D Transformations

  • آموزش در مورد ویژگی Translate3D Learning about the Translate3D Property

  • انیمیشن CSS، تمرین، آموزش و خلاصه CSS Animations, Exercises, Training and Summary

ویژگی های سفارشی و توابع CSS Custom Properties and CSS Functions

  • مقدمه ای بر توابع CSS و ویژگی های سفارشی Introduction to CSS Functions and Custom Properties

  • شروع با CSS Custom Properties Starting with CSS Custom Properties

  • تغییر ویژگی های سفارشی با جاوا اسکریپت Switching Custom Properties with JavaScript

  • مشخصات ویژگی های سفارشی Specificities of Custom Properties

  • کاوش در جزئیات توابع CSS Exploring CSS Functions in Detail

  • نگاهی به توابع حداقل، حداکثر و گیره CSS Looking at the min, max and clamp Functions of CSS

  • ادغام دانش ما تا کنون Integrating Our Knowledge So Far

  • خلاصه Summary

فرم ها Forms

  • مقدمه ای بر فرم های HTML5 Introduction to HTML5 Forms

  • آشنایی با اجزای فرم های HTML5 Understanding the Components of HTML5 Forms

  • کاوش ویژگی‌هایی مانند «لازم» و «فوکوس خودکار» Exploring attributes like 'required' and 'autofocus'

  • یادگیری در مورد ویژگی تکمیل خودکار و لیست Learning about the autocomplete and list attribute

  • انواع ورودی HTML5 HTML5 Input Types

  • درک ورودی های تاریخ و زمان Understanding the Date and Time Inputs

  • سبک سازی فرم های HTML5 با CSS Styling HTML5 Forms with CSS

  • نشان دادن فیلدهای مورد نیاز Indicating Required Fields

  • یک ظاهر طراحی شده به کارت های ورودی و پر کردن پس زمینه با CSS Styling Input Carets and Background Fills with CSS

  • خلاصه Summary

ویژگی های CSS لبه Cutting Edge CSS Features

  • مقدمه ای بر ویژگی های CSS و لایه های Cascade Introduction to CSS Features and Cascade Layers

  • تسلط بر لایه های آبشاری برای بهبود مدیریت سبک Mastering Cascade Layers for Improved Style Management

  • یادگیری در مورد CSS Nesting Learning about CSS Nesting

  • ساده سازی CSS با انتخابگرهای تودرتو و پرسش های رسانه ای Simplifying CSS with Nested Selectors and Media Queries

  • خلاصه Summary

تکنیک های پاداش و مشاوره جدایی Bonus Techniques and Parting Advice

  • نکات و تکنیک ها - مقدمه Tips and Techniques - Introduction

  • کوتاه کردن متن در CSS Truncating Text in CSS

  • پانل های اسکرول و نوارهای پیمایش سفارشی Scrolling Panels and Custom Scrollbars

  • CSS Scroll Snap CSS Scroll Snap

  • پیمایش روان با رفتار اسکرول CSS Smooth Scrolling with CSS scroll-behavior

  • توصیه مهم جدایی Important Parting Advice

  • تنظیم سطوح پشتیبانی مرورگر Setting Browser Support Levels

  • CSS Frameworks و Linting CSS Frameworks and Linting

  • بررسی عملکرد و ابزارهای عملکرد Exploring Performance and Performance Tools

  • چیز بزرگ بعدی چیست؟ What's the Next Big Thing?

  • خلاصه Summary

نمایش نظرات

Packtpub یک ناشر دیجیتالی کتاب‌ها و منابع آموزشی در زمینه فناوری اطلاعات و توسعه نرم‌افزار است. این شرکت از سال 2004 فعالیت خود را آغاز کرده و به تولید و انتشار کتاب‌ها، ویدیوها و دوره‌های آموزشی می‌پردازد که به توسعه‌دهندگان و متخصصان فناوری اطلاعات کمک می‌کند تا مهارت‌های خود را ارتقا دهند. منابع آموزشی Packtpub موضوعات متنوعی از جمله برنامه‌نویسی، توسعه وب، داده‌کاوی، امنیت سایبری و هوش مصنوعی را پوشش می‌دهد. محتوای این منابع به صورت کاربردی و به‌روز ارائه می‌شود تا کاربران بتوانند دانش و توانایی‌های لازم برای موفقیت در پروژه‌های عملی و حرفه‌ای خود را کسب کنند.

طراحی وب سایت ریسپانسیو با HTML5 و CSS [ویدئو]
جزییات دوره
16h 53m
135
Packtpub Packtpub
(آخرین آپدیت)
از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Mr. Benjamin Frain Mr. Benjamin Frain

بن فراین از سال 1996 یک طراح/توسعه‌دهنده وب بوده است. او در حال حاضر به عنوان سرپرست فنی UI-UX در bet365 مشغول به کار است. قبل از وب، او به عنوان یک بازیگر تلویزیونی کم ارزش (و متواضع) و روزنامه نگار فناوری کار می کرد، که از دانشگاه سالفورد در رشته رسانه و اجرا فارغ التحصیل شد. او چهار فیلمنامه به همان اندازه دست کم گرفته شده (به عقیده او) نوشته است و هنوز هم این باور را دارد که ممکن است یکی را بفروشد. خارج از کار، او از لذت های ساده لذت می برد: کتاب، فیلم و تشکیل خانواده.